<template>

<div class="pageNav">
    <div class="page">
        <div class="lineLeftOne"></div>
        <div class="lineLeftTwo"></div>
        <div class="lineLeftThree"></div>
        <div class="lineTopOne"></div>
        <div class="lineTopTwo"></div>
        <div class="list" >
            <div class="containerPointer" @click="popMysalary">
                <div class="bgImage"></div>
                <p class="navTitle">我的工资</p>
            </div>

        </div>
        <div class="list" v-if="SCShow">
            <div class="containerPointer" @click='huzhaoDialogVisible = true'>
                <div class="bgImage1"></div>
                <p class="navTitle">外事证件</p>
            </div>
        </div>

        <div class="list" v-if="applyLeavePlatform">
            <div class="containerPointer" @click="popMyLeave" >
                <div class="bgImage2"></div>
                <p class="navTitle">发起休假</p>
            </div>
        </div>

        <div class="list" v-if="leaderPortal">
            <div class="containerPointer"  @click="ToOwnLeaderHome('1')">
                <div class="bgImage3"></div>
                <p class="navTitle">领导门户</p>
            </div>
        </div>


        <div class="list" v-if="reportPlatform">
            <div class="containerPointer" @click="ToLeaderHome('2')">
                <div class="bgImage4"></div>
                <p class="navTitle">信息共享表</p>
            </div>
        </div>
        <div class="list" v-if="reportPlatform">
            <div class="containerPointer" @click="ToOwnLeaderHome('2')">
                <div class="bgImage4"></div>
                <p class="navTitle">报表平台</p>
            </div>
        </div>



		<div class="list" v-if="holidayPlatform" >
            <div class="containerPointer" @click="ToBackSetting">
                <div class="backStageSetting"></div>
                <p class="navTitle">系统设置</p>
            </div>
        </div>

		<div class="list" >
            <div class="containerPointer" @click="ToSetting">
                <div class="backupSetting"></div>
                <p class="navTitle">代理设置</p>
            </div>
        </div>

        <div class="list" v-if='superCodeVisible'>
            <div class="containerPointer" @click.stop="superCodeDialogVisible = true">
                <div class="superCodeImg"></div>
                <p class="navTitle">超级验证码</p>
            </div>
        </div>

        <div class="list" v-for="item in leaderList">
            <div class="containerPointer" @click="ToLeave(item)">
                <div class="leaderLeave"></div>
                <p class="navTitle">{{item.substituteName}}请假</p>
            </div>
        </div>
        <div class="list" v-for="itemNull in (4-leaderList.length)"></div>


    </div>
    
    <huzhao-dialog :dialogShowIf.sync='huzhaoDialogVisible'></huzhao-dialog> 
    <s-dialog  :dialogVisible.sync="salaryVisible" :passwordStatus.sync='passwordStatus' ></s-dialog>
    <supercode-dialog :dialogVisible.sync="superCodeDialogVisible"></supercode-dialog>
</div>

</template>

<script>
import SDialog from '@/components/public/salaryPassword'
import HuzhaoDialog from '@/components/employee/requestVacation/huzhaoDialog'
import SupercodeDialog from '@/components/employee/superCode'
import { _encode } from '@/common/js/handleCode'

export default {
	data() {
		return {
			vacationVisible: false,
			emplid: null,
			huzhaoDialogVisible: false,
			salaryVisible: false,
			passwordStatus: '',
			lockGao:false,
			superCodeVisible:false,
			superCodeDialogVisible:false,
			isProduct: location.hostname !== '10.5.0.137' && location.hostname !== 'localhost'
		}
	},
	props: [
		'reportPlatform',
		'leaderPortal',
		'holidayPlatform',
		'applyLeavePlatform',
		'leaderList'
	],

	components: {
		HuzhaoDialog,
		SDialog,
		SupercodeDialog
	},
	computed: {
		SCShow: function () {
			return (
				location.hostname === '10.5.0.137' || location.hostname === 'localhost'
			)
		}
	},
	mounted(){
		this.setSuperCodeVisible()
	},
	methods: {
		setSuperCodeVisible(){
			this.superCodeVisible = parseInt(localStorage.getItem('superCode'))
		},
		ToBackSetting: function () {
			var newTab

			newTab = window.open('about:blank')
			if (
				newTab.localStorage.getItem('token') !== localStorage.getItem('token')
			) {
				newTab.localStorage.clear()
			}
			if (location.hostname === 'localhost') {
				newTab.location.href = window.origin + '/#/backStageManager'
				return
			}
			newTab.location.href = this.Axios.baseURI + '/#/backStageManager'
		},
		ToSetting: function () {
			var newTab

			newTab = window.open('about:blank')
			if (
				newTab.localStorage.getItem('token') !== localStorage.getItem('token')
			) {
				newTab.localStorage.clear()
			}
			// newTab.localStorage.clear();
			if (location.hostname === 'localhost') {
				newTab.location.href = window.origin + '/#/backupSetting'
				return
			}
			newTab.location.href = this.Axios.baseURI + '/#/backupSetting'
		},

		ToPassport: function () { },

		ToLeaderTest(type){
			var newTab

			newTab = window.open('about:blank')
			this.clearLocalStorage(newTab)
			if (location.hostname === 'localhost') {
				newTab.location.href = window.origin + '/#/home?type='+type
				return
			}
			newTab.location.href = this.Axios.baseURI + '/#/home?type='+type
			return
			
		},

		ToOwnLeaderHome(type){
			var newTab;
			newTab = window.open('about:blank')
			this.clearLocalStorage(newTab)
			if (location.hostname === 'localhost') {
				newTab.location.href = window.origin + '/#/home?type='+type
				return
			}
			newTab.location.href = this.Axios.baseURI + '/#/home?type='+type
			return
		},

		ToLeaderHome: function (type) {
			var newTab


			// if (
			// 	localStorage.getItem('para') == 'undefined' ||
			// 	!localStorage.getItem('para')
			// ) {
			// 	return
			// }

			var params = JSON.parse(localStorage.getItem('para'))

			newTab = window.open('about:blank')

			this.Axios.Post(this.URL.getURL.url, params).then(res => {

				this.clearLocalStorage(newTab)

				if (!res.data.datas) {
					newTab.location.href = this.Axios.baseURI + '/#/home?type='+type
				} else {
					if (type == '2' && res.data.datas.reportUrl) {
						newTab.location.href = res.data.datas.reportUrl.trim()

					} else if (type == '1' && res.data.datas.urlToLeader) {

						newTab.location.href = res.data.datas.urlToLeader.trim()

					}
				}
			})
		},

		getAge () {
			if (this.emplInfo && this.emplInfo.birthdate) {
				let Data = new Date()
				let year = Data.getFullYear()
				let age = ''
				let birthYear = this.emplInfo && this.emplInfo.birthdate.substr(0, 4)
				return Number(year) - Number(birthYear)
					? '(' + (Number(year) - Number(birthYear)) + ')'
					: ''
			}
		},
		goResumeUrl () {
			const params = {
				resumeType: 1
			}

			window.open('/module/resume.html?' + _encode(JSON.stringify(params)))

	
		},
		clearLocalStorage: function (newTab) {
			var token = newTab.localStorage.getItem('token')

			var token1 = localStorage.getItem('token')
			if (token && token1 && token !== token1) {
				newTab.localStorage.clear()
			}
		},
		popVacation () {
			var newTab
			newTab = window.open('about:blank')
			this.clearLocalStorage(newTab)
			if (location.hostname !== 'localhost') {
				newTab.location.href = this.Axios.baseURI + '/#/homepage2/myVacation'
			} else {
				newTab.location.href = location.origin + '/#/homepage2/myVacation'
			}
		},

		popMysalary () {

			// 如果后代返回10001 直接跳转到我的工资页面
			// 否则 弹出Dialog 输入密码
      
			this.Axios.Post(this.URL.queryTwoPassword.url)
				.then((res) => {
          
					this.passwordStatus = res.data.datas

					if (this.passwordStatus == 10001) {

						// var newTab = window.open('about:blank');
						// debugger;
						// this.clearLocalStorage(newTab);
						// if (location.hostname !== 'localhost') {
						//   newTab.location.href = this.Axios.baseURI + '/#/mySalary';
						// } else {
						//   newTab.location.href = location.origin + '/#/mySalary';
						// }

						this.$router.push({ path: 'mySalary' })
					} else {
						this.salaryVisible = true
					}
				})
				.catch((err) => {

					this.salaryVisible = true
				})
			// var newTab = window.open('about:blank');
			// this.clearLocalStorage(newTab);
			// if (location.hostname !== 'localhost') {
			//   newTab.location.href = this.Axios.baseURI + '/#/mySalary';
			// } else {
			//   newTab.location.href = location.origin + '/#/mySalary';
			// }


		},
		popMyLeave () {
			var newTab
			newTab = window.open('about:blank')
			this.clearLocalStorage(newTab)
			if (location.hostname !== 'localhost') {
				newTab.location.href = this.Axios.baseURI + '/#/mySend'
			} else {
				newTab.location.href = location.origin + '/#/mySend'
				// newTab.location.href =this.Axios.baseURI + '/#/mySend';
			}
		},
		ToLeave (item) {
			var newTab
			newTab = window.open('about:blank')
			this.clearLocalStorage(newTab)
			var param = {
				principalId: item.substituteId,
				name: item.substituteName
			}
			localStorage.setItem('lids', JSON.stringify(param))
			if (location.hostname !== 'localhost') {
				newTab.location.href = this.Axios.baseURI + '/#/myLeaderSend'
			} else {
				newTab.location.href = location.origin + '/#/myLeaderSend'
			}
		}
	},

}
</script>

<style  lang='css' scoped>
.page {
  position: absolute;
	left: 0; top: 0; right: 0; bottom: 0;
}
.lineLeftOne{
  position: absolute;
  border:1px solid #f3f3f3;
  left:25%;
  bottom:0;
  top:0;
  z-index:10;
}
.lineLeftTwo{
  position: absolute;
  border:1px solid #f3f3f3;
  left:50%;
  bottom:0;
  top:0;
  z-index:10;
}
.lineLeftThree{
  position: absolute;
  border:1px solid #f3f3f3;
  left:75%;
  bottom:0;
  top:0;
  z-index:10;
}
.lineTopOne{
  position: absolute;
  border:1px solid #f3f3f3;
  top:33.333%;
  left:0;
  right:0;
  z-index:10;  
}
.lineTopTwo{
  position: absolute;
  border:1px solid #f3f3f3;
  top:66.666%;
  left:0;
  right:0;
  z-index:10;  
}
.list {
	float: left;
	height: 33.33%; width: 25%;
	position: relative;
  background-color: #fff;
  /* border-right:2px solid #f3f3f3;
  border-bottom:2px solid #f3f3f3; */
}
.list .containerPointer{
  cursor: pointer;
}
div.list:nth-child(7),div.list:nth-child(8),div.list:nth-child(9){
    border-bottom:0px solid #fff;
}
.bgImage{
    width: 70px;
    height: 70px;
    margin: auto;
    background: url(/static/images/nav.png) no-repeat -77px 11px / 600px 150px;
}
.bgImage1{
    width: 70px;
    height: 70px;
    margin: auto;
    background: url(/static/images/nav.png) no-repeat -189px 11px / 600px 150px;
}
.bgImage2{
    width: 70px;
    height: 70px;
    margin: auto;
    background: url(/static/images/nav.png) no-repeat -300px 11px / 600px 150px;
}
.bgImage3{
    width: 70px;
    height: 70px;
    margin: auto;
    background: url(/static/images/nav.png) no-repeat -412px 11px / 600px 150px;
}
.bgImage4{
    width: 70px;
    height: 70px;
    margin: auto;
    background: url(/static/images/nav.png) no-repeat -519px 11px / 600px 150px;
}
.superCodeImg {
  width: 70px;
  height: 70px;
  margin: auto;
  background: url(/static/images/superCode.svg) no-repeat center center/72% 72%;
}
.leaderLeave {
  width: 70px;
  height: 70px;
  margin: auto;
  background: url(/static/images/lingdao.png) no-repeat center center/72% 72%;
}
.backupSetting {
  width: 70px;
  height: 70px;
  margin: auto;
  background: url(/static/images/daili.png) no-repeat center center/72% 72%;
}
.backStageSetting {
  width: 70px;
  height: 70px;
  margin: auto;
  background: url(/static/images/xitong.png) no-repeat center center/72% 72%;
}
.navTitle{
    text-align:center;
}
/* .list:before {
	content: '';
	position: absolute;
	left: 10px; right: 10px; top: 10px; bottom: 10px;
	border-radius: 10px;
	background-color: #cad5eb;
} */
/* .list:after {
	content:attr(data-index);
	position: absolute;
	height: 30px;
	left: 0; right: 0; top: 0; bottom: 0;
	margin: auto;
	text-align: center;
	font: 24px/30px bold 'microsoft yahei';
} */
</style>

